<template>
    <oa-tab-page title="我的">
        <hl-card class="user-card">
            <div class="username">
                {{$store.state.username}}
            </div>
            <div class="card-status">
                <!--当前地址：{{address}}-->
            </div>
            <div class="avatar">
                <img src="../assets/logo.png"/>
            </div>
        </hl-card>


        <oa-list-item @click="$router.push('/location')" title="考勤打卡" icon="icon-kaoqin"/>

        <oa-list-item @click="$router.push('/about')" title="关于" icon="icon-about"/>
        <!--<oa-list-item title="获取信息" @click="showMessage" icon="icon-about"/>&lt;!&ndash;&ndash;&gt;-->

        <oa-list-item @click="checkUpdate" title="检查更新" icon="icon-update">
            <label v-show="$store.state.new_version" slot="right" class="new">new</label>
        </oa-list-item>

        <!--<oa-list-item title="检查更新" />-->

        <div class="list-button" @click="logout">
            退出登录
        </div>
    </oa-tab-page>
</template>

<script>
    import OaTabPage from "../components/oa-tab-page";
    import HlCard from "../components/hl-card";
    import {getConfig, getUserInfo, saveUserInfo} from "../config";
    import OaListItem from "../components/oa-list-item";

    export default {
        components: {
            OaListItem,
            HlCard,
            OaTabPage
        },
        name: "me",
        mounted() {
            this.getLocation();
        },
        data() {
            return {
                address: "",
                timer: null
            }
        },
        beforeRouteLeave(to, form, next) {
            // clearInterval(this.timer)
            console.log("离开了")
            next()
        },
        methods: {
            openAbout() {
                // window.nativeLink.openUrl("http://www.baidu.com")
            },

            checkUpdate() {
                let config = getConfig();
                let url = config.rootUrl + "static/app.js?t" + new Date().getTime()
                this.$get(url).then((res) => {
                    if (res.version != this.$store.state.version) {
                        this.$createDialog({
                            type: 'confirm',
                            title: '提示',
                            content: '检测到新的版本，请下载升级',
                            icon: 'cubeic-alert',
                            confirmBtn: {
                                text: '立即升级',
                            },
                            cancelBtn: {
                                text: '下次升级',
                            },
                            onConfirm: () => {
                                if (!cordova.InAppBrowser) {
                                    return;
                                }
                                let down_url = res.ios
                                if (device.platform == "Android") {
                                    down_url = res.android
                                }
                                cordova.InAppBrowser.open(down_url, '_system', 'location=no,toolbar=yes,toolbarposition=top,closebuttoncaption=关闭');

                            }
                        }).show()
                    } else {
                        this.$createDialog({
                                type: 'alert',
                                title: '提示',
                                content: '已是最新版本',
                                icon: 'cubeic-alert',
                                confirmBtn: {
                                    text: '确定',
                                }
                            }
                        ).show()
                    }
                })
            },
            showMessage() {
                let day = new Date();
                let time = day.toLocaleDateString();
                let message = {message: "大酒店电视剧" + time, time: time, is_read: false}
                let notices = window.localStorage.getItem("notices");
                notices = notices ? JSON.parse(notices) : [];
                if (notices.length > 0) {
                    notices.splice(0, 0, message);
                } else {
                    notices = [];
                    notices.splice(0, 0, message);
                }
                this.$store.commit("updateNew", {is_new_message: true})
                window.localStorage.setItem("notices", JSON.stringify(notices));
                this.$store.commit("updateMessage", {notices: notices})
            },


            getLocation() {
                // this.timer = setInterval(() => {
                //     try {
                //
                //         baidumap_location
                //             .getCurrentPosition((result) => {
                //                 // console.log(JSON.stringify(result, null, 4));
                //                 //此处获取经纬度
                //                 this.address = result.addr
                //             }, (error) => {
                //             });
                //     } catch (e) {
                //         console.log(e);
                //
                //     }
                // }, 1000)
            },
            logout() {

                this.$createDialog({
                    type: 'confirm',
                    title: '提示',
                    content: '确定要注销登录吗？',
                    icon: 'cubeic-alert',
                    confirmBtn: {
                        text: '注销',
                    },
                    cancelBtn: {
                        text: '取消',
                    },
                    onConfirm: () => {
                        let userInfo = getUserInfo();
                        userInfo.isLogin = false;
                        saveUserInfo(userInfo);
                        localStorage.removeItem("last_update")
                        this.$store.commit("updateLogin", {is_login: false});
                        this.$router.push('/login');
                        try {
                            window.JPush.deleteAlias({
                                    sequence: 1,
                                },
                                function (result) {
                                    //consoel.info(result.alias);
                                    console.info("setAlias:", result);
                                },
                                function (error) {
                                    console.log(error);
                                });
                        } catch (e) {
                            console.log(e);
                        }
                    }
                }).show();

            },
        }
    }
</script>

<style scoped lang="less">
    .username {
        font-size: 18px;
        font-weight: bold;
        color: #2c2c2c;
    }

    .user-card {
        position: relative;
        .card-status {
            font-size: 12px;
            margin-top: 64px;
            border-top: solid 1px #e0e0e0;
            margin-right: 72px;
            line-height: 24px;
            color: #888888;
        }
    }

    .list-button {
        height: 40px;
        background: #FFFFFF;
        margin-top: 12px;
        margin-bottom: 12px;
        line-height: 40px;
        font-size: 14px;
        color: #f02d34;
        text-align: center;
        &:active {
            background: darken(#fff, 5%);
        }
    }

    .new {
        background: #f02d34;
        border-radius: 5px;
        padding: 2px 4px;
        color: #ffffff;
        margin-right: 8px;

    }

    .avatar {
        position: absolute;
        right: 12px;
        top: 18px;
        img {
            border-radius: 50%;
            border: solid 1px #e0e0e0;
            width: 60px;
            height: 60px;
        }

    }
</style>